<!-- pages/customer-service/index.vue -->
<template>
	<view class="container">
		<!-- 黄色头部背景 -->
		<view class="yellow-header">
			<view class="panda-info">
				<image class="panda-icon" src="/static/images/panda.png" mode="aspectFit"></image>
				<view class="info-bubble">
					<text>遇到问题看这里！</text>
					<text>帮您自助解决难题</text>
				</view>
				<image class="small-panda" src="/static/images/small-panda.png" mode="aspectFit"></image>
				<image class="wave-icon" src="/static/images/wave.png" mode="aspectFit"></image>
			</view>

			<!-- 选项卡 -->
			<view class="tabs">
				<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
					:class="{ active: currentTab === index }" @click="changeTab(index)">
					{{ tab }}
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 常见问题 -->
			<view v-if="currentTab === 0" class="faq-content">
				<view v-for="(item, index) in commonProblems" :key="index" class="faq-item"
					@click="toggleFaqItem(index)">
					<view class="faq-title">
						<text>{{ item.title }}</text>
						<text class="arrow" :class="{ 'arrow-down': !item.isOpen }">></text>
					</view>
					<view class="faq-answer" v-if="item.isOpen">
						{{ item.answer }}
					</view>
				</view>
			</view>

			<!-- 使用说明 -->
			<view v-if="currentTab === 1" class="guide-content">
				<view v-for="(item, index) in userGuides" :key="index" class="guide-item"
					@click="toggleGuideItem(index)">
					<view class="guide-title">
						<text>{{ item.title }}</text>
						<text class="arrow" :class="{ 'arrow-down': !item.isOpen }">></text>
					</view>
					<view class="guide-answer" v-if="item.isOpen">
						{{ item.answer }}
					</view>
				</view>
			</view>

			<!-- 其他问题 -->
			<view v-if="currentTab === 2" class="other-content">
				<view v-for="(item, index) in otherProblems" :key="index" class="other-item"
					@click="toggleOtherItem(index)">
					<view class="other-title">
						<text>{{ item.title }}</text>
						<text class="arrow" :class="{ 'arrow-down': !item.isOpen }">></text>
					</view>
					<view class="other-answer" v-if="item.isOpen">
						{{ item.answer }}
					</view>
				</view>
			</view>
		</view>

		<!-- 在线客服 -->
		<view class="customer-service" @click="callPhone">
			<text>在线客服</text>
		</view>
	</view>
</template>

<script>
import { API_CONFIG } from '../../config/constants';
	export default {
		data() {
			return {
				tabs: ['常见问题', '使用问题', '其他问题'],
				currentTab: 0,
				commonProblems: [],
				userGuides: [],
				otherProblems: []
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			changeTab(index) {
				this.currentTab = index;
			},
			toggleFaqItem(index) {
				this.commonProblems[index].isOpen = !this.commonProblems[index].isOpen;
			},
			toggleGuideItem(index) {
				this.userGuides[index].isOpen = !this.userGuides[index].isOpen;
			},
			toggleOtherItem(index) {
				this.otherProblems[index].isOpen = !this.otherProblems[index].isOpen;
			},
			// 拨打指定客服电话
			callPhone() {
				// 调用微信用于拨打电话的API
				wx.makePhoneCall({
					phoneNumber: "15239418000",
				})
			},
			
			// 获取问题分类信息
			getProblemTypeList(){
				uni.request({
					url:API_CONFIG.baseUrl+"/babyCar.Problem/list",
					method:"GET",
					success: (res) => {
						this.processProblemData(res.data.data)
					},
					fail: (err) => {
						console.error(err);
					}
				})
			},
			// 处理分类
			processProblemData(data) {
			  // 分类处理逻辑
			  data.forEach(item => {
			    // 创建带状态的对象
			    const processedItem = {
			      title: item.title,
			      answer: item.description,
			      isOpen: item.is_show == 1 ? true : false
			    };
			    
			    // 按类型分类
			    switch(item.type) {
			      case '常见问题': this.commonProblems.push(processedItem); break;
			      case '使用问题': this.userGuides.push(processedItem); break;
			      case '其他问题': this.otherProblems.push(processedItem); break;
			    }
			  });
			  console.log(this.commonProblems);
			}
		},
		onLoad() {
			this.getProblemTypeList();
		}
	}
</script>

<style>
	.container {
		min-height: 100vh;
		background-color: #f5f5f5;
		position: relative;
	}

	.nav-bar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		padding: 0 15px;
		background-color: #fff;
	}

	.back-icon {
		font-size: 20px;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
	}

	.right-icons {
		display: flex;
		align-items: center;
	}

	.right-icons .iconfont {
		margin-left: 15px;
		font-size: 20px;
	}

	.circle-icon {
		border-radius: 50%;
		background-color: #f0f0f0;
		width: 30px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.yellow-header {
		background-color: #ffda44;
		padding: 20px 15px;
		position: relative;
	}

	.panda-info {
		display: flex;
		position: relative;
		margin-bottom: 20px;
	}

	.panda-icon {
		width: 60px;
		height: 60px;
	}

	.info-bubble {
		background-color: #fff;
		border-radius: 10px;
		padding: 10px;
		margin-left: 10px;
		position: relative;
		max-width: 60%;
	}

	.info-bubble text {
		display: block;
		font-size: 14px;
		line-height: 1.2;
		color: #ff6633;
	}

	.small-panda {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 20%;
		bottom: 0;
	}

	.wave-icon {
		width: 30px;
		height: 30px;
		position: absolute;
		right: 10%;
		bottom: 0;
	}

	.tabs {
		display: flex;
		background-color: #fff;
		border-radius: 20px;
		overflow: hidden;
	}

	.tab-item {
		flex: 1;
		text-align: center;
		padding: 10px 0;
		font-size: 14px;
		color: #333;
		position: relative;
	}

	.tab-item.active {
		background-color: #ffda44;
		color: #333;
		font-weight: bold;
	}

	.content {
		background-color: #f5f5f5;
		padding-bottom: 60px;
	}

	.faq-item,
	.guide-item,
	.other-item {
		background-color: #fff;
		margin-bottom: 1px;
		padding: 15px;
	}

	.faq-title,
	.guide-title,
	.other-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
	}

	.arrow {
		transform: rotate(90deg);
		transition: transform 0.3s;
	}

	.arrow-down {
		transform: rotate(-90deg);
	}

	.faq-answer,
	.guide-answer,
	.other-answer {
		margin-top: 10px;
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	.customer-service {
	    position: fixed;
	    bottom: 20px;
	    left: 15px;
	    right: 15px;
	    width: calc(100% - 30px);
	    background-color: #fff;
	    border-radius: 40rpx;
	    padding: 15rpx 0;
	    text-align: center;
	    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	    display: flex;
	    justify-content: center;
	    align-items: center;
	  }
	
	  .customer-service text {
	    font-size: 32rpx;
	    font-weight: 500;
	  }

	.cs-icon {
		margin-right: 5px;
	}
</style>